<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .bigbox {
        display: flex;
        width: 1000px;
        height: 600px;
        justify-content: space-between;
        .dustbin {
          width: 270px;
          height: 100%;
          background-color: #979696;
          font-size: 150px;
          text-align: center;
        }
        .trash {
          width: 700px;
          height: 100%;
          display: flex;
          flex-direction: column;

          p {
            text-align: center;
            width: 100%;
            height: 50px;
            background-color: #ebebeb;
            border: dashed 2px #6c6b6b;
          }
        }
      }
      .tetx {
        width: 1000px;
        height: 50px;
        font-size: 25px;
        text-align: center;
        border: #6c6b6b solid 2px;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div class="bigbox">
      <div class="dustbin" draggable="true">垃圾箱</div>
      <div class="trash">
        <p id="cup">1号杯子</p>
        <p id="cup">2号杯子</p>
        <p id="cup">3号杯子</p>
        <p id="cup">4号杯子</p>
        <p id="cup">5号杯子</p>
        <p id="cup">6号杯子</p>
      </div>
    </div>
    <div class="tetx">拖到垃圾箱删除列表</div>
  </body>
  <script>
    window.onload = function () {
      var dustbin = document.querySelector(".dustbin");
      var trash = document.querySelector(".trash");
      var ps = document.querySelectorAll(".trash p");
      ps.forEach(function (p, index) {
        p.id = "cup" + (index + 1);
        p.setAttribute("draggable", "true");
      });
      ps.forEach(function (p) {
        p.addEventListener("dragstart", function (e) {
          e.dataTransfer.setData("cups", this.id);
        });
      });
      dustbin.addEventListener("dragover", function (e) {
        // 取消阻止默认
        e.preventDefault();
      });
      dustbin.addEventListener("drop", function (e) {
        e.preventDefault();
        // 放置元素
        var id = e.dataTransfer.getData("cups");
        // 找到对应的杯子元素
        var elment = document.getElementById(id);
        if (elment) {
          elment.remove();
        }
      });
    };
  </script>
</html>



